<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bootstrap</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style>
			.container{
				background: skyblue;
			}
			.container-fluid{
				background: red;
				
			}
		</style>
	</head>
	<body>
		<!--
			其他ui框架
			weUI--微信团队的框架
			CDN -- 资源分发 链接(用两个//开头)
		-->
		<!--
			栅格化系统
			与表格类似
			媒体查询+百分比+流式布局(float)
		-->
		<div class="container">
			根据媒体查询，会设置为不同的固定宽度
		</div>
		<div class="container-fluid">
  			永远宽度为100%
		</div>
		<h1>栅格化系统</h1>
		<div class="container">
			<div class="row">
				<div class="col-xs-12 col-sm-9 col-md-4">
					内容
				</div>
				<div class="col-sm-3 col-md-4 hidden-xs">
					平板设备才出现的内容
				</div>
				<div class="col-md-4 hidden-sm hidden-xs">
					普通PC下才出现的内容
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-xs-1 col-md-push-11">
					pull-1
				</div>
				<div class="col-xs-11 col-md-pull-1">
					pull-11
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-md-3">
					col-md-3
				</div>
				<div class="col-md-3 col-md-offset-6">
					colo-md-offset-6
				</div>
			</div>
		</div>
		
		<!--内嵌套-->
		<div class="container">
			<div class="row">
				<div class="col-md-6" style="background: red;">
					这里第一行第一列的md6
					<div class="row">
						<div class="col-md-8" style="background: green;">
							这里是嵌套在第一行第一列的md8
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/bootstrap.js"></script>
	</body>
</html>
